<template>
  <div class="banner">
    <swiper :options="swiperOption" ref="mySwiper" id="mySwiper">
      <swiper-slide
        v-for="(item, index) in BannerData"
        :key="index"
        class="swiper_slide_item"
        ><div class="img-container">
          <div class="img"><img :src="item.imgUrl" alt="bgImg" /></div></div
      ></swiper-slide>
      <!-- 分页器和前进后退按钮 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "HomeTopBanner",
  props: {
    BannerData: Array,
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          type: "bullets", //小圆点
          dynamicBullets: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        loop: true, // 循环播放
        speed: 1000, // 发生页面切换动画时，动画的切换速度
        autoplay: {
          delay: 2000, // 幻灯片停留时间
          disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
        },
      },
    };
  },

  //计算属性
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },

  //设置自定义的按钮，点击后将前往目标也页
  methods: {
    to(index) {
      this.swiper.slideTo(index);
    },
  },
};
</script>

<style lang="less" scoped>
.banner {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(100vh - 170px);
  padding: 10px 0;
  box-sizing: border-box;
  .swiper-container {
    height: 100%;
    width: 100%;
    .swiper-wrapper {
      .swiper_slide_item {
        .img-container {
          display: flex;
          justify-content: center;
          height: calc(100vh - 180px);
          width: 100%;
          .img {
            height: 100%;
            width: 1300px;
            img {
              height: 100%;
              width: 100%;
            }
          }
        }
      }
    }
  }
}
.banner::before {
  content: "";
  background: url("../../assets/images/home/TopBanner/05.jpg") no-repeat center
    center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  filter: blur(10px);
}
</style>
